<template>
  <div class="project-permission">
    <el-card>
      <!-- 标题头 -->
      <div slot="header">
        <span
          style="
            display: flex;
            align-items: center;
            font-size: 18px;
            margin-bottom: 8px;
          "
        >
          <img
            src="@/assets/img/qx.png"
            style="height: 20px; width: 20px; margin-right: 5px"
          />
          权限
        </span>
      </div>
      <div class="form" style="margin-top: 2%">
        <el-form
          ref="elForm"
          :model="formData"
          label-width="140px"
          :rules="rules"
        >
          <el-form-item label="项目名称" prop="userName">
            <el-input
              v-model="formData.userName"
              style="width: 200px"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="用户组" prop="addUser">
            <el-input v-model="inputValue" style="width: 200px">
              <el-button
                style="padding-right: 10px"
                slot="prefix"
                type="text"
                @click="UserGroup"
              >
                <span style="border-bottom: 1px solid; color: #467ef7"
                  ><i class="el-icon-plus"></i>添加用户组</span
                >
              </el-button>
            </el-input>

            <div class="group">
              <div v-for="tag in dynamicTags" :key="tag" class="group-item">
                {{ tag.ugName
                }}<i
                  class="el-icon-close"
                  style="margin-left: 5px; margin-top: 2px; font-weight: bold"
                  @click="handleClose(tag)"
                ></i>
              </div>
            </div>
          </el-form-item>
          <el-divider></el-divider>
          <div class="row">
            <el-form-item label="APP内显示" prop="field106">
              <el-radio-group v-model="formData.field106">
                <el-radio
                  v-for="(item, index) in field106Options"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item label="数据-团队" prop="field105">
              <el-radio-group v-model="formData.field105">
                <el-radio
                  v-for="(item, index) in field105Options"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="row" v-if="typeData!=4">
            <el-form-item :label="typeData==3?'标识显示':'码显示'" prop="field101">
              <el-radio-group v-model="formData.field101">
                <el-radio
                  v-for="(item, index) in field101Options"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="typeData==3?'标识审核':'数据-脱敏'" prop="field104">
              <el-radio-group v-model="formData.field104">
                <el-radio
                  v-for="(item, index) in field104Options"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="row">
            <el-form-item label="佣金显示" prop="field107">
              <el-radio-group v-model="formData.field107">
                <el-radio
                  v-for="(item, index) in field107Options"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>

            <el-form-item label="数据-汇总" prop="field103">
              <el-radio-group v-model="formData.field103">
                <el-radio
                  v-for="(item, index) in field103Options"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </div>

          <el-divider v-if="typeData!=3&&typeData!=4"></el-divider>
          <el-form-item label="每日创建最大个数" prop="field109" v-if="typeData!=3&&typeData!=4">
            <el-input
              v-model.trim="formData.field109"
              :maxlength="3"
              clearable
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-divider></el-divider>
          <div class="button">
            <el-button
              type="primary"
              style="width: 100px; font-size: 12px; background: #3875f6"
              @click="submitForm"
              >提交</el-button
            >
          </div>
        </el-form>
      </div>

      <el-dialog :visible.sync="drawer" title="添加用户组" width="660px" center>
        <!--搜索-->
        <div style="border-bottom: 1px solid #eeeeee">
          <el-form :inline="true" label-position="left" label-width="85px">
            <el-form-item label="用户组名称">
              <el-select
                v-model="queryParams.nickName"
                placeholder="请选择用户组名称"
                clearable
                filterable
                style="width: 200px"
              >
                <el-option
                  v-for="(item, index) in userGroupData"
                  :key="index"
                  :label="item.ugName"
                  :value="item.ugName"
                  style="padding-bottom: 40px; margin-bottom: 5px"
                ></el-option>
              </el-select>

              <!-- <el-input
                placeholder="请输入用户组名称"
                v-model="queryParams.nickName"
                maxlength="20"
                clearable
                style="width: 200px"
              ></el-input> -->
            </el-form-item>
            <span style="text-align: center; margin-left: 10px">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="UserGroup(1)"
                >搜索</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="toggleSelection"
                >添加</el-button
              >
            </span>
          </el-form>
        </div>
        <!--表格-->
        <div>
          <!--  -->
          <el-table
            :data="tableData"
            style="width: 100%"
            height="300"
            @selection-change="checkShow"
            :header-cell-style="{
              background: '#FAFAFA',
              color: 'black',
              'font-size': 15 + 'px',
              'text-align': 'center',
            }"
          >
            <!-- <el-table
          :data="tableData"
          height="75vh"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        > -->
            <!-- ugState==1是选中 0是未选中 -->
            <el-table-column type="selection" width="55" align="center">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.remark"></el-checkbox>
              </template>
            </el-table-column>

            <el-table-column prop="ugName" label="用户组名称" align="center" />
            <el-table-column prop="two" label="用户组人数" align="center" />
          </el-table>
          <!--  -->
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  selectByProId,
  selectByUG,
  editAuthAPI,
} from "@/api/projectManagement/index.js";
export default {
  components: {},
  props: [],
  data() {
    return {
      typeData:"",
      //用户组下拉列表
      userGroupData: [],
      // 是否全选
      checkBox: 0,
      // 添加的人数数据
      dynamicTags: [
        // { name: "王二蛋" }
      ],
      // 表格选中取消人员的暂存数据
      multipleSelection: [],
      inputVisible: false,
      inputValue: "",
      // 弹窗用户名称数据
      tableData: [
        {
          date: "11",
          id: 1,
          name: "王二狗",
          address: "axcvxcvxcvcxvxcxvsd",
          code: true,
        },
        {
          id: 2,
          date: "14",
          name: "赵建设",
          address: "qwe",
          code: false,
        },
        {
          id: 3,
          date: "235234",
          name: "常国庆",
          address: "rhtyr",
          code: false,
        },
        {
          id: 4,
          date: "3456345",
          name: "李秀芹",
          address: "egre",
          code: true,
        },
      ],
      // 弹窗搜索数据
      queryParams: {
        nickName: "",
        userName: "",
      },
      // 弹窗搜索数据
      queryParams1: {},
      // 从右到左弹窗
      drawer: false,
      formData: {
        userName: undefined,
        addUser: undefined,
        field106: 1,
        field101: 1,
        field107: 1,
        field105: 1,
        field104: 1,
        field103: 1,
        field109: 1000,
        id: null,
      },
      rules: {
        userName: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "blur",
          },
        ],
        field106: [
          {
            required: true,
            message: "APP内显示不能为空",
            trigger: "change",
          },
        ],
        field102: [
          {
            required: true,
            message: "数据显示不能为空",
            trigger: "change",
          },
        ],
        field101: [
          {
            required: true,
            message: "码显示不能为空",
            trigger: "change",
          },
        ],
        field107: [
          {
            required: true,
            message: "佣金显示不能为空",
            trigger: "change",
          },
        ],
        field105: [
          {
            required: true,
            message: "数据--团队不能为空",
            trigger: "change",
          },
        ],
        field104: [
          {
            required: true,
            message: "数据--脱敏不能为空",
            trigger: "change",
          },
        ],
        field103: [
          {
            required: true,
            message: "数据--汇总不能为空",
            trigger: "change",
          },
        ],
        field109: [
          {
            required: true,
            message: "请输入每日创建最大个数",
            trigger: "blur",
          },
          {
            pattern: /^[0-9]*$/,
            message: "格式错误",
            trigger: "change",
          },
        ],
      },
      field106Options: [
        {
          label: "是",
          value: 0,
        },
        {
          label: "否",
          value: 1,
        },
      ],

      field101Options: [
        {
          label: "是",
          value: 0,
        },
        {
          label: "否",
          value: 1,
        },
      ],
      field107Options: [
        {
          label: "是",
          value: 0,
        },
        {
          label: "否",
          value: 1,
        },
      ],
      field105Options: [
        {
          label: "是",
          value: 0,
        },
        {
          label: "否",
          value: 1,
        },
      ],
      field104Options: [
        {
          label: "是",
          value: 0,
        },
        {
          label: "否",
          value: 1,
        },
      ],
      field103Options: [
        {
          label: "是",
          value: 0,
        },
        {
          label: "否",
          value: 1,
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.userId = sessionStorage.getItem("userID");
    //获取URL参数
    this.formData.userName = this.$route.query.proName;
    // this.getparam();
    this.getData();
  },
  methods: {
    async getData() {
      this.typeData=this.$route.query.type;
      const getdata = await selectByProId({
        userId: this.userId,
        proId: this.$route.query.proId,
      });
      //console.log(getdata, "获取参数");
      if (getdata.code == 200) {
        this.formData.field106 = getdata.data.proAuth.appState; //app显示
        this.formData.field101 = getdata.data.proAuth.codeState; //码显示
        if (getdata.data.proAuth.codeMax == 0) {
          this.formData.field109 = 100; //创建最大
        } else {
          this.formData.field109 = getdata.data.proAuth.codeMax; //创建最大
        }
        this.formData.field103 = getdata.data.proAuth.dataHState; //数据汇总
        this.formData.field105 = getdata.data.proAuth.dataTeamState; //数据团队
        this.formData.field104 = getdata.data.proAuth.dataTState; //数据脱敏
        this.formData.field107 = getdata.data.proAuth.moneyState; //佣金显示
        this.formData.id = getdata.data.proAuth.id; //
        if (getdata.data.proProjectUgList.length > 0) {
          getdata.data.proProjectUgList.forEach((item) => {
            //console.log(item, "5555");
            item.ugName = item.one;
          });
          this.dynamicTags = getdata.data.proProjectUgList;
        } else {
          //如果没有回显值，那么就显示默认用户组
          let param = {
            userId: this.userId,
            proId: this.$route.query.proId,
            ugName: this.queryParams.nickName,
          };
          const userData = await selectByUG(param);
          //console.log(userData, "用户组");
          if (userData.code == 200 && userData.data.length != 0) {
            this.dynamicTags = userData.data.filter((item) => {
              return item.ugName == "默认用户组";
            });
          }
        }
      }

      // const param2 = JSON.parse(localStorage.param);

      //用户组下拉搜索列表
      let param2 = {
        userId: this.userId,
        proId: this.$route.query.proId,
        ugName: this.queryParams.nickName,
      };
      const userdata = await selectByUG(param2);
      //console.log(userdata, "778899");
      if (userdata.code == 200) {
        this.userGroupData = userdata.data;
      } else {
        this.$message.error(userGroupData.msg);
      }

      // 查询已经是是true的人数并显示出来

      const pxData = data.data.groupRelaList.filter(
        (item) => item.flag == true
      );
      this.dynamicTags = pxData;
    },
    //添加用户组搜索按钮
    async UserGroup(row) {
      this.drawer = true;
      let param = {
        userId: this.userId,
        proId: this.$route.query.proId,
        ugName: this.queryParams.nickName,
      };
      const data = await selectByUG(param);
      //console.log(data);
      if (data.code == 200) {
        data.data.forEach((element) => {
          if (element.remark == null) {
            element.remark = false;
          } else {
            element.remark = true;
          }
        });
        this.tableData = data.data;
      }
      // //console.log(this.dynamicTags,'6666')
      //如果已经有默认或者选中后的用户组，那么在添加用户组的弹窗里面就自动也是选中状态。
      this.tableData.forEach((item2) => {
        this.dynamicTags.map((item) => {
          if (item.ugId == item2.ugId) {
            item2.remark = true;
          }
        });
      });
    
      if (row==1) {
        this.$message({
          message: "搜索中...",
          type: "success",
        });
      }
    },
    //全选或取消全选
    checkShow(rows) {
      //console.log(rows, "2222");
      //console.log(this.checkBox, "3333");
      if (this.checkBox == 0) {
        this.tableData.map((row) => {
          row.remark = true;
        });
        this.checkBox = 1;
      } else {
        this.tableData.map((row) => {
          row.remark = false;
        });
        this.checkBox = 0;
      }
    },

    // 提交按钮
    submitForm() {
      //console.log(this.dynamicTags, "000000000000000");
      this.$refs["elForm"].validate(async (valid) => {
        if (!valid) {
        } else {
          if (this.dynamicTags.length != 0) {
            let param = {
              proAuth: {
                appState: this.formData.field106, //app显示
                codeState: this.formData.field101, //码显示
                codeMax: this.formData.field109, //创建最大
                dataHState: this.formData.field103, //数据汇总
                dataTeamState: this.formData.field105, //数据团队
                dataTState: this.formData.field104, //数据脱敏
                moneyState: this.formData.field107, //佣金显示
                id: this.formData.id,
                proId: this.$route.query.proId - 0,
              },
              proProjectUgList: [],
            };

            param.proProjectUgList = this.dynamicTags.map((item) => {
              return {
                proId: this.$route.query.proId - 0,
                ugId: item.ugId,
              };
            });
            //console.log(this.formData, "提交参数");
            //console.log(param, "后端传递参数");
            //console.log(this.dynamicTags, "用户组列表");

            const data = await editAuthAPI(param);
            if (data.code == 200) {
              this.$message({
                type: "success",
                message: "编辑成功！",
              });
              this.$router.push("projectlist");
            } else {
              this.$message.error("编辑失败！");
            }
            //console.log(data, "回调");
          } else {
            this.$message({
              message: "用户组不可为空",
              type: "warning",
            });
          }
        }
      });
    },
    //   ..弹窗数据选择和取消获取数据
    handleSelectionChange(val) {
      //console.log(this.val, "全部选中");
      // this.multipleSelection = val;
      //  //console.log(this.tableData,'全部选中')
    },
    //   确定添加人员按钮
    toggleSelection() {
      // //console.log(this.multipleSelection,'确定添加按钮');
      //console.log(this.tableData, "确定添加按钮");
      const data = this.tableData.filter((item) => item.remark == true);
      //console.log(data, "2222");
      this.dynamicTags = data;
      this.drawer = false; //点击确定添加以后就关闭弹窗
    },
    //   删除人数函数
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },

    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style scoped lang='scss'>
//弹窗在屏幕中间
::v-deep .el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 0vh !important;
}
</style>
<style>
.project-permission {
  margin: 15px;
}

.project-permission .el-card__body {
  min-height: 800px;
}

.project-permission .el-card__header {
  margin: 0 20px;
  padding-left: 0px;
}

.project-permission .form {
  width: 800px;
  margin: auto;
}

.project-permission .form .el-form .row {
  display: flex;
}

.project-permission .form .el-form .row .el-form-item:first-child {
  margin-right: 100px;
}

.project-permission .form .el-form .row .el-radio-group {
  margin-left: 20px;
}

.project-permission .form .el-form {
  margin: auto;
}

.project-permission .form .el-form .button {
  margin: auto;
  text-align: center;
}

.project-permission .el-divider--horizontal {
  background: #f0f0f0;
}

.project-permission .form .group {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.project-permission .form .group .group-item {
  display: flex;
  align-items: center;
  background: #e8f4ff;
  margin-right: 15px;
  /* height: 20px; */
  height: 30px;
  color: #4f86f7;
  font-size: 10px;
  margin-bottom: 15px;
  padding: 10px 5px;
  border-radius: 3px;
  border: 1px solid #e8f4ff;
}

.project-permission .el-dialog__headerbtn .el-dialog__close {
  color: #a39b9f;
  font-size: 25px;
}

.project-permission .el-dialog {
  border-radius: 5px;
}

.project-permission .el-dialog .el-dialog__header {
  border-bottom: 1px solid #eeeeee;
  width: 90%;
  margin: auto;
  padding-left: 0;
}

.project-permission .el-dialog__body {
  padding-left: 26px;
}

.project-permission .el-checkbox__input .el-checkbox__inner {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.project-permission .unselected.el-checkbox__input .el-checkbox__inner::before {
  border: 1px solid #fff;
  box-sizing: content-box;
  content: "";
  border-left: 0;
  border-top: 0;
  height: 1px;
  left: -2px;
  position: absolute;
  top: 7px;
  width: 20px;
}

.project-permission .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: white;
}

.project-permission .el-checkbox__input .el-checkbox__inner::after {
  border: 1px solid #fff;
  box-sizing: content-box;
  content: "";
  border-left: 0;
  border-top: 0;
  height: 10px;
  left: 7px;
  position: absolute;
  top: 2px;
  width: 4px;
  transform: rotate(45deg) scaleY(1);
}
</style>
